<template>
  <div class="blank-container">
    <div class="header">
      <div class="user-info">
        <span class="username">{{ userStore.userInfo.username }}</span>
        <span class="role-badge" :class="{ 'admin': userStore.isAdmin(), 'visitor': userStore.isVisitor() }">
          {{ userStore.isAdmin() ? '管理员' : '游客' }}
        </span>
      </div>
      <el-button type="danger" size="small" @click="handleLogout" class="logout-button">退出登录</el-button>
    </div>

    <div class="content">
      <router-view></router-view>
    </div>

    <BottomNavigation />
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import BottomNavigation from '../components/BottomNavigation.vue'

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
  userStore.clearUserInfo()
  ElMessage.success('已成功退出登录')
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.blank-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  background-image:
    radial-gradient(circle at 25px 25px, rgba(139, 90, 43, 0.2) 2%, transparent 0%),
    radial-gradient(circle at 75px 75px, rgba(139, 90, 43, 0.2) 2%, transparent 0%);
  background-size: 100px 100px;
  position: relative;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;

  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;

    .username {
      font-weight: bold;
      color: #333;
    }

    .role-badge {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      color: white;

      &.admin {
        background-color: #8b5a2b;
      }

      &.visitor {
        background-color: #5b8b2b;
      }
    }
  }

  .logout-button {
    font-size: 12px;
    padding: 6px 12px;
  }
}

.content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 60px; /* 为底部导航留出空间 */
}
</style>
